<template>
	<view>
		<!-- 搜索头部导航 -->
		<search-menu @clicksearch="clicksearch" title="豫见电商" searchText="搜索商品" :disabled="true"></search-menu>
		
			<!-- 商品列表 -->
			<view class="shop-list">
				<shop-wrapper :shopData="shopData" @clickItem="clickShopItem"></shop-wrapper>
			</view>
		
		<!-- 返回顶部按妞 -->
		<view class="goback">
			<go-back @goback="clickGoback" :isshow="isshowGoback"></go-back>
		</view>
		<view class="dixian">
			<dixian :titles="dixianText" ></dixian>
		</view>
	</view>
</template>

<script>
	import searchMenu from '../../components/searchMenu/searchMenu.vue'
	
	import shopWrapper from '../../components/shop-wrapper/shop-wrapper.vue';  //商品容器
	import goBack from '../../components/go-back/go-back.vue'  //引入返回顶部按钮
	import dixian from '../../components/dixian/dixian.vue'   //引入底线
	export default {
		components:{searchMenu,shopWrapper,goBack,dixian},
		data() {
			return {
				isshowGoback:false,  //是否显示返回顶部
				shopData:[],
				dixianText:"我可是有底线的",
			   //查询套件
				query:{
					sid:0,
					page:1, //分页
					limit:10, //每页数据
				}
			}
		},
		onLoad(e) {
			console.log(e);
			if(e.cid){
				this.query.sid = e.cid;
			}
			//获取商品列表
			// this.getGoodsList()
			this.shopData = this.$request.mock.shopData
			
		},
		//页面滚动
		onPageScroll(e){
			// console.log(e);
			// this.changeNavStyle(e);// 修改导航栏样式
			
			this.isShowGobackMenu(e) //显示返回顶部按钮
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('dd');
			
			setTimeout(function(){
				uni.stopPullDownRefresh()
			},1000)
		},
		//页面滚动到底部
		onReachBottom(){
			console.log('到底了');
			uni.showLoading({
				title:'数据加载中',
				mask:true
			})
			setTimeout( ()=>{
				uni.hideLoading()
				
				//模拟请求，数组拼接
				// this.shopData = this.shopData.concat(this.$request.mock.shopData)
			},3000)
		
		},
	 
		methods: {
			//获取商品列表
			getGoodsList(){
		 
				this.$request.api.goods.getGoodsList(this.query).then(res=>{
					console.log(res);
					if(res.data.status === 200){
						this.shopData = res.data.data
					}
				}).catch(err=>{
					
				})
				
			},
			//点击搜索菜单
			clicksearch(e) {
				console.log(e);
		 
				this.$request.msg(e);
				if (e === 'search'){
					uni.navigateTo({
						url:'../search/search'
					})
				}
			},
			
			//修改导航栏nav
			changeNavStyle(e){
				if (e.scrollTop > 200){
					uni.setNavigationBarColor({
						frontColor:"#ffffff",
						backgroundColor:"rgb(235,235,235,.8)",
						animation:{
							duration:5,
							timingFunc:'easeInOut'
						}
					})
				}else{
					uni.setNavigationBarColor({
						frontColor:"#000000",
						backgroundColor:"#0081FF",
						animation:{
							duration:5,
							timingFunc:'easeInOut'
						}
					})
				}
			},
			//监听页面滚动距离，如果到800 就显示返回顶部按钮
			isShowGobackMenu(e){
			 
				if(e.scrollTop > 800){
					
					this.isshowGoback = true;
				}else{
					this.isshowGoback = false
				}
			},
			
			//点击返回顶部
			clickGoback(){
				console.log("点击了 返回顶部");
				uni.pageScrollTo({
					scrollTop:0,
					duration:400
				})
			},
			//点击商品
			clickShopItem(e){
				console.log(e);
				this.$request.msg(e.title)
				uni.navigateTo({
					url:'../goodsInfo/goodsInfo?id='+e.id
				})
			}
		}
	}
</script>

<style>

</style>
